<template>
  <div
    class="task-map-body-workSide-body task-span1"
    :style="`height: ${mapHeight - 180 + (isMulti ? 0 : 50)}px`"
  >
    <div v-if="mapList.length">
      <div
        class="task-flex task-map-body-workSide-body-item"
        :class="{ isClick: item.isClick }"
        v-for="(item, index) in mapList"
        :key="index"
        :ref="`side_item_${index}`"
      >
        <div class="task-map-body-workSide-body-item-content" @click="clickListItem(item, (item.i - 1))">
          <div class="task-map-body-workSide-body-item-index" :class="{ active: item.selected}">
            {{ item.i }}
          </div>
          <div class="task-span1">
            <p v-if="item.customerEntity" class="customer-name" :class="globalIsHaveCustomerViewDetailAuth ? 'link-text' : ''" @click="createCustomerTab(item.customerEntity.id)">{{ item.customerEntity.name }}</p>
            <p>
              {{$t('common.form.type.taskNo')}}：<span :class="globalIsHaveTaskViewDetailAuth ? 'link-text' : ''" @click.stop="openTaskTab(item.id, item.taskNo)">{{ item.taskNo }}</span>
            </p>
            <p>{{$t('common.task.taskType')}}：{{ item.templateName }}</p>
            <p v-if="item.linkMan">{{$t('common.base.phone')}}：{{ item.linkMan.phone }} <i class="icon-dianhua2 link-text iconfont" @click.stop="makePhoneCall(item.linkMan.phone)" v-if="has_call_center_module && item.linkMan.phone"></i></p>
            <p>
              {{$t('common.base.address')}}：
              {{ item.address | fmt_address }}
            </p>
            <div class="calendar-time">
              <div>
                <p v-if="!isCalendar">{{$t('common.form.type.planTime')}}：{{(item.planTime && fmt_datetime(item.planTime)) || '--'}}</p>
                <p v-if="isCalendar && item.planStartTimeShow">{{$t('common.form.type.planStartTime')}}：{{(item.planStartTime && fmt_datetime(item.planStartTime)) || '--'}}</p>
                <p v-if="isCalendar && item.planEndTimeShow">{{$t('common.form.type.planEndTime')}}：{{(item.planEndTime && fmt_datetime(item.planEndTime)) || '--'}}</p>
              </div>
              <i class="iconfont icon-bianji1" v-if="allowModifyPlanTimeJudgeHandler(item) && showEditPlanTimeBtn(item)" @click="openPlanTimeDialog($event, item)"></i>
            </div>
          </div>
        </div>
        <div class="task-map-body-workSide-body-item-info" @click="chooseListItem(item, (item.i - 1))">
          <el-checkbox v-model="item.selected" @click.native="(e) => e.stopPropagation()" @change="checkListItem(item, (item.i - 1))"></el-checkbox>
        </div>
      </div>
    </div>
    <div v-else class="unlist">{{$t('task.tip.mapModeTip2')}}</div>
    <div
      class="side_list_loadmore"
      @click="$emit('next')"
      v-show="mapList.length && type && !isLastPage"
    >
      {{$t('common.base.tip.loadMore')}}
    </div>
  </div>
</template>
<script>
// TODO: 权限问题
/* Api */
import * as TaskApi from '@src/api/TaskApi.ts';
import { allowModifyPlanTimeJudgeHandler } from '@service/TaskService'
import { isCalendar } from '@src/util/CalendarUtil';
import {openTabForCustomerView} from '@src/util/business/openTab'

import AuthMixin from '@src/mixins/authMixin'
import { openAccurateTab } from '@src/util/platform'
import { PageRoutesTypeEnum } from 'pub-bbx-global/pageType/dist/enum/PageRoutesEnum'
import { fmt_datetime } from '@src/filter/fmt'

export default {
  name: 'task-map-list',
  mixins: [AuthMixin],
  props: {
    isMulti: {
      type: Boolean,
      default: false
    },
    mapHeight: {
      type: Number,
      default: 0,
    },
    mapList: {
      type: Array,
      default: () => {
        return [];
      },
    },
    type: {
      type: Number,
      default: 0,
    },
    has_call_center_module: {
      type: Boolean
    },
    isLastPage: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      initData: {
        auth: {
          TASK_DISPATCH: true
        }
      },
      isCalendar,
      fmt_datetime
    };
  },
  methods: {
    // 跳转客户详情页面
    createCustomerTab(id) {
      if (!this.globalIsHaveCustomerViewDetailAuth) return
      openTabForCustomerView(id)
    },
    allowModifyPlanTimeJudgeHandler,
    showEditPlanTimeBtn(item) {
      if (!isCalendar) return true
      if (isCalendar) return item.planStartTimeShow || item.planEndTimeShow
    },
    /**
     * @description 拨打电话
     */
    async makePhoneCall(phone) {
      const params = {
        phone,
        taskType:'task'
      }
      const {code, message} = await TaskApi.dialout(params)
      if (code) {
        this.$platform.alert(message);
      }
    },
    /**
     * @description 打开工单详情tab
     * @param {String} taskId 工单id
     */
    openTaskTab(taskId, taskNo) {
      if (!taskId) return;
      
      if (!this.globalIsHaveTaskViewDetailAuth) return

      let fromId = window.frameElement.getAttribute('id');
      
      openAccurateTab({
        type: PageRoutesTypeEnum.PageTaskView,
        key: taskId,
        titleKey: taskNo,
        params: 'noHistory=1',
        fromId
      })
    },
    /**
     * 选择右侧普通面板条目
     */
    chooseListItem(item, index) {
      this.changeListItem(!item.selected, index)
    },
    // 选择右侧check按钮
    checkListItem(item, index) {
      this.changeListItem(item.selected, index)
    },
    changeListItem(selected, index) {
      if (!this.isMulti) {
        this.mapList.forEach(task => {
          this.$emit('updateMapList', {
            index: task.i - 1,
            key: 'selected',
            value: false
          })
        })
      }
      this.$emit('updateMapList', {
        index,
        key: 'selected',
        value: selected
      })
    },
    /**
     * 点击右侧普通面板条目
     */
    clickListItem(item, index) {
      const isClick = item.isClick
      this.$emit('openInfo', {  markKey:item.id, editInfo:true })
    },
    // 展示计划时间弹窗
    openPlanTimeDialog(event, item) {
      event ? event.stopPropagation() : ''
      this.$emit('showModifyPlanTimeDialog', {taskData: item})
    },
  },
};
</script>
<style lang="scss" scoped>
.task-map {
  &-body {
    &-workSide {
      width: 320px;
      position: absolute;
      top: 0px;
      right: 0;
      border-left: 1px solid #e5e5e5;
      background-color: #fff;
      z-index: 9;
      &-header {
        height: 50px;
        padding: 0 10px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #eee;
        font-size: 16px;
        font-weight: 700;
        background: #fff;
      }
      &-body {
        width: 100%;
        overflow: hidden;
        overflow-y: scroll;
        background-color: #fff;
        color: #a0a0a0;
        font-size: 13px;
        &-item {
          cursor: pointer;
          border-bottom: 1px solid #eee;
          display: flex;
          &.isClick {
            background: #E6FFFD;
          }
          &-content {
            padding: 10px;
            display: flex;
            flex: 1;
            overflow: hidden;
            .task-span1 {
              overflow: hidden;
            }
          }
          &-info {
            width: 36px;
            display: flex;
            align-items: center;
            justify-content: center;
          }
          &-index {
            background: url("src/assets/img/task/mapListIcon.png") no-repeat 0 0 / 96px 32px;
            width: 32px;
            height: 32px;
            margin-right: 10px;
            line-height: 28px;
            text-align: center;
            color: #fff;
            font-family: tahoma;
            font-size: 12px;
            font-weight: bold;
            &.active {
              background: url("src/assets/img/task/mapListIcon.png") no-repeat -64px 0 / 96px 32px;
            }
            &.disabled {
              background: url("src/assets/img/task/mapListIcon.png") no-repeat -32px 0 / 96px 32px;
            }
          }
          .calendar-time {
            display: flex;
            justify-content: space-between;
            align-items: center;
            .iconfont {
              color: $color-primary;
              font-size: 13px;
            }
          }
          p {
            margin-bottom: 5px;
            font-weight: normal;
          }
        }
        .customer-name {
          font-weight: bold;
          font-size: 16px;
          @include text-ellipsis();
        }
        .icon-dianhua2 {
          font-size: 12px;
          margin-right: 0;
        }
      }
      .fold_btn {
        cursor: pointer;
        position: absolute;
        top: 50%;
        left: -22px;
        margin-top: -22px;
        z-index: 10;
        background-color: #fff;
        width: 22px;
        height: 43px;
        line-height: 43px;
        padding-left: 5px;
        > i {
          font-size: 12px;
          color: #6666;
          font-weight: 600;
        }
      }
    }
  }
  .side_list_loadmore {
    padding: 10px 0;
    text-align: center;
    color: $color-primary;
    font-size: 12px;
    cursor: pointer;
  }
  .unlist {
    color: #333;
    text-align: center;
    padding-top: 10px;
  }
}

.task-disabled.task-map-body-workSide-body {
  span {
    color: #666;
  }
}
</style>
